<!--
	此示例下载自 https://echarts.apache.org/examples/zh/editor.html?c=candlestick-brush
-->
<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>

<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.5.0/files/dist/echarts.min.js"></script>

<!-- Uncomment this line if you want to dataTool extension
<script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.5.0/files/dist/extension/dataTool.min.js"></script>
-->
<!-- Uncomment this line if you want to use gl extension
<script type="text/javascript" src="https://registry.npmmirror.com/echarts-gl/2/files/dist/echarts-gl.min.js"></script>
-->
<!-- Uncomment this line if you want to echarts-stat extension
<script type="text/javascript" src="https://registry.npmmirror.com/echarts-stat/latest/files/dist/ecStat.min.js"></script>
-->
<!-- Uncomment this line if you want to use map
<script type="text/javascript" src="https://registry.npmmirror.com/echarts/4.9.0/files/map/js/china.js"></script>
<script type="text/javascript" src="https://registry.npmmirror.com/echarts/4.9.0/files/map/js/world.js"></script>
-->
<!-- Uncomment these two lines if you want to use bmap extension
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_API_KEY"></script>
<script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.5.0/files/dist/extension/bmap.min.js"></script>
-->

<script type="text/javascript">
    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
        renderer: 'canvas',
        useDirtyRect: false
    });
    var app = {};
    var option;

    const upColor = '#ec0000';
    const downColor = '#00da3c';
    const requestUrl = "/api/stock/chart/getStockAveragelineData";
    var begin = "";
    var end = "";
    var stockData;

    function getUrlParam(code) {
        const url = new URL(window.location.href);
        const params = new URLSearchParams(url.search);
        return params.get(code);
    }

    function splitData(rawData) {
        let stockDates = [];
        let values = [];
        let volumes = [];
        let marks = [];
        let shortAverages = [];
        let longAverages = [];
        for (let i = 0; i < rawData.length; i++) {
            var data = rawData[i];
            if (i == 0) {
                begin = data.stockDate;
            }
            end = data.stockDate;
            stockDates.push(data.stockDate);
            values.push(data.value);
            shortAverages.push(data.shortAverageData);
            longAverages.push(data.longAverageData)

            volumes.push([i, data.volume, data.upOrDown == 'y' ? 1 : -1]);
            if (data.mark) {
                var yPosition = data.data.closePrice * 1.03.toFixed(2);
                marks.push({coord: [i, yPosition], value: data.mark});
            }

        }
        return {
            data: rawData,
            stockDates: stockDates,
            values: values,
            volumes: volumes,
            marks: marks,
            shortAverages: shortAverages,
            longAverages: longAverages

        };
    }


    const code = getUrlParam("code");
    var url = requestUrl + "?code=" + code;
    const period = getUrlParam("period");
    const longPeriod = getUrlParam("longPeriod");
    if (period) {
        url = requestUrl + "?code=" + code + "&period=" + period + "&longPeriod=" + longPeriod;
    }
    $.get(url, function (rawData) {
        var data = splitData(rawData);
        // console.log(JSON.stringify(data.values));
        stockData = rawData;
        console.log(stockData);
        myChart.setOption(
            (option = {
                animation: false,
                legend: {
                    bottom: 10,
                    left: 'center',
                    data: ['涨跌幅', 'shortHullMA', 'longHullMA']
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    },
                    borderWidth: 1,
                    borderColor: '#ccc',
                    padding: 10,
                    textStyle: {
                        color: '#000'
                    },
                    // position: function (pos, params, el, elRect, size) {
                    //     const obj = {
                    //         top: 10
                    //     };
                    //     // obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
                    //     return obj;
                    // },
                    formatter: function (params) {
                        console.log(params);
                        var param = params[0];
                        // var yesterdayData = stockData.values[param.value[0] - 1];
                        // var yesterdayPrice = yesterdayData ? yesterdayData[1] : param.value[1];
                        // var rate = (param.value[2] - yesterdayPrice) * 100 / yesterdayPrice;
                        var rate = stockData[param.value[0]].rate;
                        rate = rate.toFixed(2);
                        return param.name + '<br>' +
                            '开盘:' + param.value[1] + '<br>' +
                            '收盘:' + param.value[2] + '<br>' +
                            '最低:' + param.value[3] + '<br>' +
                            '最高:' + param.value[4] + '<br>' +
                            '成交量:' + param.value[5] + '<br>' +
                            '涨跌幅%:' + rate + '<br>' +
                            'shortHullMA:' + params[1].value + '<br>' +
                            'longHullMA:' + params[2].value + '<br>';
                    },
                    // extraCssText: 'width: 170px'
                },
                axisPointer: {
                    link: [
                        {
                            xAxisIndex: 'all'
                        }
                    ],
                    label: {
                        backgroundColor: '#777'
                    }
                },
                toolbox: {
                    feature: {
                        dataZoom: {
                            yAxisIndex: false
                        },
                        brush: {
                            type: ['lineX', 'clear']
                        }
                    }
                },
                brush: {
                    xAxisIndex: 'all',
                    brushLink: 'all',
                    outOfBrush: {
                        colorAlpha: 0.1
                    }
                },
                visualMap: {
                    show: false,
                    seriesIndex: 6,
                    dimension: 2,
                    pieces: [
                        {
                            value: 1,
                            color: upColor
                        },
                        {
                            value: -1,
                            color: downColor
                        }
                    ]
                },
                grid: [
                    {
                        left: '10%',
                        right: '8%',
                        height: '50%'
                    },
                    {
                        left: '10%',
                        right: '8%',
                        top: '63%',
                        height: '16%'
                    }
                ],
                xAxis: [
                    {
                        type: 'category',
                        data: data.stockDates,
                        boundaryGap: false,
                        axisLine: {onZero: false},
                        splitLine: {show: false},
                        min: 'dataMin',
                        max: 'dataMax',
                        axisPointer: {
                            z: 100
                        }
                    },
                    {
                        type: 'category',
                        gridIndex: 1,
                        data: data.stockDates,
                        boundaryGap: false,
                        axisLine: {onZero: false},
                        axisTick: {show: false},
                        splitLine: {show: false},
                        axisLabel: {show: false},
                        min: 'dataMin',
                        max: 'dataMax'
                    }
                ],
                yAxis: [
                    {
                        scale: true,
                        splitArea: {
                            show: true
                        }
                    },
                    {
                        scale: true,
                        gridIndex: 1,
                        splitNumber: 2,
                        axisLabel: {show: false},
                        axisLine: {show: false},
                        axisTick: {show: false},
                        splitLine: {show: false}
                    }
                ],
                dataZoom: [
                    {
                        type: 'inside',
                        xAxisIndex: [0, 1],
                        start: 0,
                        end: 100
                    },
                    {
                        show: true,
                        xAxisIndex: [0, 1],
                        type: 'slider',
                        top: '85%',
                        start: 0,
                        end: 100
                    }
                ],
                series: [

                    {
                        name: '涨跌幅',
                        type: 'candlestick',
                        data: data.values,
                        itemStyle: {
                            color: upColor,
                            color0: downColor,
                            borderColor: undefined,
                            borderColor0: undefined
                        },
                        markPoint: {
                            symbolSize: 30,
                            data: data.marks
                        }

                    },
                    {
                        name: 'shortHullMA',
                        type: 'line',
                        data: data.shortAverages,
                        smooth: true,
                        symbol: 'none',
                        lineStyle: {
                            opacity: 0.8,
                            color: '#ff3300'

                        }
                    },
                    {
                        name: 'longHullMA',
                        type: 'line',
                        data: data.longAverages,
                        smooth: true,
                        symbol: 'none',
                        lineStyle: {
                            opacity: 0.8,
                            color: '#00ff00'

                        }
                    },
                    {
                        name: '成交量',
                        type: 'bar',
                        xAxisIndex: 1,
                        yAxisIndex: 1,
                        data: data.volumes
                    }
                ]
            }),
            true
        );
        myChart.dispatchAction({
            type: 'brush',
            areas: [
                {
                    brushType: 'lineX',
                    coordRange: [begin, end],
                    xAxisIndex: 0
                }
            ]
        });
    });

    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);
</script>
</body>
</html>